<template>
  <div>
    <a-modal v-model:visible="visible" :title="CCTVname" @ok="handleOk">
      <p>{{ position }}</p>
      <video width="320" height="240" controls>
        <source :src="url" type="video/mp4" />
      </video>
    </a-modal>
  </div>
</template>

<script setup>
import { Query } from '@/utils/Query.js'
import { ref } from 'vue'
const visible = ref(false)
let CCTVname = ref('')
let position = ref('')
let url = ref('')

const map = defineProps({
  map: Object,
})

const handleOk = (e) => {
  visible.value = false
}
//点击显示摄像头
function showCCTV() {
  const where = '1>0'
  const service = { docName: 'smartRoad', layerId: 3 }
  Query.queryBySql({
    where,
    service,
    callback: querySuccess1,
  })
}
//成功回调
function querySuccess1(result) {
  var format = new Zondy.Format.PolygonJSON()
  //将MapGIS要素JSON反序列化为ol.Feature类型数组
  var features = format.read(result)
  //实例化一个矢量图层drawLayerr用于高亮显示结果
  var drawSource = new ol.source.Vector({
    wrapX: false,
  })
  drawSource.addFeatures(features)
  // 设置样式
  var drawLayer = new ol.layer.Vector({
    source: drawSource,
    style: new ol.style.Style({
      image: new ol.style.Icon({
        anchor: [0.5, 0.5],
        src: './images/cctv2.png',
      }),
    }),
  })
  map.map.addLayer(drawLayer)
}
// 业务逻辑
function serviceLogic(e) {
  let mouseposition = []
  mouseposition = e.coordinate
  const toleranceradius = 0.001
  const service = { docName: 'smartRoad', layerId: 3 }
  Query.queryByMousePosition({
    mouseposition,
    toleranceradius,
    service,
    callback: querySuccess,
  })
}
//成功回调
function querySuccess(result) {
  var format = new Zondy.Format.PolygonJSON()
  var features = format.read(result)

  if (features) {
    CCTVname.value = '摄像头编号:' + features[0].values_.values_['编号']
    position.value = features[0].values_.values_['位置']
    url.value = '/video/video.mp4'
    visible.value = true
  } else {
    alert('请选择监控摄像头!')
  }
}
// 绑定
const handleCCTV = () => {
  map.map.on('click', serviceLogic)
  showCCTV()
}
// 解绑
const handleCancelCCTV = () => {
  map.map.un('click', serviceLogic)
  map.map.getLayers().array_.splice(3, 3)
  map.map.render()
}
// 向父组件暴露
defineExpose({ handleCCTV, handleCancelCCTV })
</script>

<style></style>
